
<!DOCTYPE html>
<html>

    <head> 
        <meta name="viewport" content="user-scalable=no">
        <title>Light Flowing</title>
        <meta charset="UTF-8">   
        <style>
            html, body {
                padding: 0;
                margin: 0;                
            }            
            .main {
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: #426AA1;
            }  
            .g2d {
                bottom: 10px;
                left: 10px;   
                width: 300px;
                height: 200px;
                background: rgba(255, 255, 255, 0.5);
            }              
        </style>         
    </head> 
    <script src="../../../../lib/core/ht.js"></script>   
    <script>

    
        function init() {   
            ht.Default.setImage('arrow', '');
                        
            dm = new ht.DataModel();            
            g3d = new ht.graph3d.Graph3dView(dm);
            g3d.setGridVisible(true);      
            g3d.setGridColor('#74AADA');
            g3d.getView().className = 'main';
            document.body.appendChild(g3d.getView()); 
            window.addEventListener('resize', function(e) {
                g3d.invalidate();
            }, false);             
                                    
            g2d = new ht.graph.GraphView(dm);
            g2d.setAutoScrollZone(-1);            
            g2d.getView().className = 'g2d';            
            g2d.setEditable(true);
            document.body.appendChild(g2d.getView()); 
            ht.Default.callLater(g2d.fitContent, g2d, [true, 50, true]);

            g3d.setHeadlightRange(2000);            
            
            redLight = new ht.Light();
            redLight.p3(0, 0, -175);
            redLight.s({
                'light.color': 'red',
                'light.range': 400
            });
            dm.add(redLight);
            
            rotateLight = new ht.Light();
            rotateLight.s({
                'light.color': 'green',
                'light.type': 'spot'
            });
            dm.add(rotateLight);

            yellowLight = new ht.Light();
            yellowLight.p3(0, 0, 60);
            yellowLight.s({
                'light.color': 'yellow',
                'light.range': 200
            });
            dm.add(yellowLight);

            floor = new ht.Node();
            floor.s3(1100, 10, 1100);
            floor.p3(0, -100, -110);
            floor.s({
                'shape3d': 'cylinder',
                'shape3d.side': 100,
                'shape3d.color': 'white',
                '3d.selectable': false,
                '2d.visible': false
            });
            dm.add(floor);
            
            for(var i=0; i<8; i++){
                var angle = Math.PI*2*i/8;
                    pillar = new ht.Node();
                pillar.s({
                    'shape3d': 'cylinder',
                    'shape3d.color': 'white',
                    'shape': 'circle',
                    'shape.background': 'gray'
                });
                pillar.s3(50, 180, 50);
                pillar.p3(Math.cos(angle)*480, 0, -110+Math.sin(angle)*480);
                dm.add(pillar);
            }

            shape1 = new ht.Shape();
            dm.add(shape1);  
            shape1.setTall(60);
            shape1.setThickness(0);
            shape1.s({
                'shape.background': null,
                'shape.border.width': 10,
                'shape.border.color': '#1ABC9C',
                
                'all.visible': false,
                'front.visible': true,                
                'front.reverse.flip': true,
                'front.image': 'arrow',
                'front.uv.scale': [3, 42],
                'front.uv': [0,1, 1,1, 1,0, 0,0]
            });   
            
            shape1.setPoints([
                {x: -200, y: -100},
                {x: -50, y: -100},
                
                {x: 50, y: -100},
                {x: 200, y: -100}, 
                
                {x: -200, y: -200},
                {x: -50, y: -200},
                
                {x: 50, y: -200},
                {x: 200, y: -200},                 
                
                {x: -200, y: -300},
                {x: -50, y: -300},
                
                {x: 50, y: -300},
                {x: 200, y: -300}               
            ]);
            shape1.setSegments([
                1,2, 1,2, 1,2, 1,2, 1,2, 1,2
            ]);              
            

            shape2 = new ht.Shape(); 
            dm.add(shape2);  
            shape2.setTall(60);
            shape2.setThickness(0);
            shape2.s({
                'shape.background': null,
                'shape.border.width': 10,
                'shape.border.color': 'red',
                
                'all.visible': false,
                'front.visible': true,
                'front.blend': 'red',
                'front.reverse.flip': true,
                'front.transparent': true,
                'front.opacity': 0.7,                 
                'front.image': 'arrow',
                'front.uv.scale': [16, 3]                
            });                
            shape2.setPoints([                                        
                {x: 0, y: 0},
                {x: 25, y: -15},
                {x: 50, y: 0},                    
                {x: 75, y: 15},
                {x: 100, y: 0},                                     
                {x: 125, y: -15},                    
                {x: 150, y: 0},                    
                {x: 175, y: 15},                    
                {x: 200, y: 0},   

                {x: 230, y: 0},
                {x: 255, y: -15},
                {x: 280, y: 0},                    
                {x: 305, y: 15},
                {x: 330, y: 0},                                     
                {x: 355, y: -15},                    
                {x: 380, y: 0},                    
                {x: 405, y: 15},                    
                {x: 430, y: 0}                     
            ]);                 
            shape2.setSegments([
                1, // moveTo
                3, // quadraticCurveTo
                3, // quadraticCurveTo
                3, // quadraticCurveTo
                3, // quadraticCurveTo

                1, // moveTo
                3, // quadraticCurveTo
                3, // quadraticCurveTo
                3, // quadraticCurveTo
                3 // quadraticCurveTo                    
            ]);
            shape2.p3(0, 0, 0);
                
    
            shape3 = new ht.Shape(); 
            dm.add(shape3);  
            shape3.setTall(60);
            shape3.setThickness(0);
            shape3.s({
                'shape.background': null,
                'shape.border.width': 10,
                'shape.border.color': 'blue',
                
                'all.visible': false,
                'front.visible': true,               
                'front.blend': 'blue',
                'front.reverse.flip': true,
                'front.image': 'arrow',
                'front.uv.scale': [16, 3]                
            });                
            shape3.setPoints([                                        
                {x: 0, y: 0},
                {x: 25, y: -25},
                {x: 50, y: 0},                    
                {x: 75, y: 25},
                {x: 100, y: 0},                                     
                {x: 125, y: -25},                    
                {x: 150, y: 0},                    
                {x: 175, y: 25},                    
                {x: 200, y: 0}
            ]);                 
            shape3.setSegments([
                1, // moveTo
                3, // quadraticCurveTo
                3, // quadraticCurveTo
                3, // quadraticCurveTo
                3 // quadraticCurveTo                  
            ]);
            shape3.p3(-100, 0, 100); 
            shape3.setRotationZ(-Math.PI/2);    
            
            shape4 = new ht.Shape(); 
            dm.add(shape4);  
            shape4.setTall(60);
            shape4.setThickness(0);
            shape4.s({
                'shape.background': null,
                'shape.border.width': 10,
                'shape.border.color': 'blue',
                
                'all.visible': false,
                'front.visible': true,               
                'front.blend': 'blue',
                'front.reverse.flip': true,
                'front.image': 'arrow',
                'front.uv.scale': [16, 3]                
            });                
            shape4.setPoints([                                        
                {x: -50, y: 0},
                {x: 50, y: 0},
                {x: 0, y: 85},                    
                {x: -50, y: 0}
            ]);                 
            shape4.p3(100, 0, 100); 
            shape4.setRotationX(Math.PI/2);
            
            shape5 = new ht.Shape(); 
            dm.add(shape5);  
            shape5.setTall(50);
            shape5.setThickness(50);
            shape5.s({
                'shape.background': null,
                'shape.border.width': 10,
                'shape.border.color': 'red',
                
                'shape3d': 'cylinder',
                'shape3d.blend': 'red',
                'shape3d.image': 'arrow',
                'shape3d.bottom.image': 'arrow',
                'shape3d.top.image': 'arrow',                
                'shape3d.uv.scale': [14, 8],
                'shape3d.top.uv.scale': [2, 2]  
            });                
            shape5.setPoints([                                        
                {x: 0, y: -300},
                {x: 0, y: -50}
            ]);                            
            
            cylinder = new ht.Node();
            cylinder.s3(50, 100, 50);
            cylinder.p3(0, 0, 60);
            dm.add(cylinder);
            cylinder.s({
                'shape': 'circle',
                'shape.background': '#5DA441',
                'shape3d': 'cylinder',
                'shape3d.top.visible': false,
                'shape3d.bottom.visible': false,
                'shape3d.image': 'arrow',
                'shape3d.uv.scale': [14, 8]
            });
            
            torus = new ht.Node();                
            dm.add(torus);
            torus.setElevation(50);
            torus.s3(800, 800, 800);
            torus.p3(0, 0, -110);
            torus.s({  
                'shape': 'oval',
                'shape.background': null,
                'shape.border.width': 10,
                'shape.border.color': '#1ABC9C',
                'shape3d': 'torus',                
                'shape3d.image': 'arrow',
                'shape3d.transparent': true,
                'shape3d.reverse.flip': true,
                'shape3d.opacity': 0.7,                 
                'shape3d.side': 64,
                'shape3d.uv.scale': [100, 8],
                'shape3d.torus.radius': 0.025
            });                     
                        
            offset = 0;
            angle = 0;
            setInterval(function(){
                angle += Math.PI/50;
                rotateLight.p3(400*Math.cos(angle), 70, -110+400*Math.sin(angle));
                
                offset += 0.1;
                uvOffset = [offset, 0];
                shape1.s({
                    'front.uv.offset': uvOffset
                });
                shape2.s({
                    'front.uv.offset': uvOffset
                });
                shape3.s({
                    'front.uv.offset': uvOffset
                });
                shape4.s({
                    'front.uv.offset': uvOffset
                });
                shape5.s({
                    'shape3d.uv.offset': uvOffset,
                    'shape3d.top.uv.offset': uvOffset,
                    'shape3d.bottom.uv.offset': uvOffset
                });
                cylinder.s({
                    'shape3d.uv.offset': uvOffset
                });
                torus.s({
                    'shape3d.uv.offset': uvOffset
                });
            }, 200);
                        
        }

    </script>


    <body onload="init();">
    </body>

</html>


